<!--
 @Description 新闻列表组件-图文混排-大图样式
 @author gaohailan
 @date 2022/11/25
-->
<template>
  <section class="news-list-style-six">
    <section class="item-top">
      <section class="left-title etc3">{{ getMapping(item, 'mainTitle') || '' }}</section>
    </section>
    <section class="item-center">
      <section v-for="(ite,ind) in imgList" v-if="ind<=0" :key="ind">
        <label-comp v-if="labelObj !== undefined" :label-list="item.labelList" />
        <van-image
          :src="setImgPath(ite)"
          :fit="imgType"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>
            <img
              src="../../images/base/error-icon.png"
              alt
            >
          </template>
          <template>
            <div v-if="imgList.length>1" class="masksNum">{{ imgList.length }}图</div>
          </template>
        </van-image>

      </section>
    </section>
    <section class="item-bottom">
      <section class="left-txt">
        <span>{{ getMapping(item, 'publishTime') | newFormatTime }}</span>
        <img v-if="item.audioId" src="./images/news-audio.png" alt="">
      </section>
    </section>
  </section>
</template>
<script>
import mixins from '../mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

export default {
  name: 'NewsListStyleSix',
  components: { LabelComp },
  mixins: [mixins],
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    labelObj: {
      type: Object,
      default: () => {
        return undefined
      }
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      imgList: []
    }
  },
  created() {
    if (this.item.bigCoverImgIdUrl) {
      this.imgList = this.item.bigCoverImgIdUrl.split(',')
    } else if (this.item.bigCoverImgId) {
      const list = this.item.bigCoverImgId.split(',')
      this.imgList = list.map(item => {
        return this.setImgPath(item)
      })
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.news-list-style-six {
  box-sizing: border-box;
  padding: rem(20);
  position: relative;
  .item-top {
    flex: 1;
    .left-title {
      font-size: rem(30);
      font-weight: bold;
      text-align: left;
      color: #333333;
      line-height: 1.5;
    }
  }
  .item-bottom {
    flex: 1;
    padding-right: rem(10);
    .left-txt {
      margin-top: rem(10);
      font-size: rem(22);
      font-family: PingFang SC Regular, PingFang SC Regular-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > img {
        width: rem(49);
        height: rem(49);
      }
      > span {
        display: inline-block;
        margin-right: rem(20);
      }
    }
  }
  .item-center {
    padding-right: rem(10);
    padding-top: rem(20);
    >section{
      width: 100%;
      height: rem(368);
      border-radius: rem(8);
      display: inline-block;
      margin-right: rem(10);
      margin-bottom: rem(10);
      overflow: hidden;
      position: relative;
      .van-image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: rem(8);
        background: #c9c9c9;
        position: relative;
        overflow: hidden;
        .masksNum{
          width: rem(92);
          height: rem(42);
          background: rgba($color: #000000, $alpha: 0.4);
          position: absolute;
          line-height: rem(42);
          text-align: center;
          color: #fff;
          font-size: rem(24);
          bottom: rem(20);
          right: rem(20);
          border-radius: rem(50);
          letter-spacing: rem(2);
        }
        .van-image__error {
          > img {
            width: rem(120);
            height: rem(120);
          }
        }
      }
    }
  }
}
</style>
